<template>
  <div>
    <el-card>
      <!-- 过滤框 -->
      <!--            <el-select v-model="value" style="float:left" @change="changeDept" filterable placeholder="选择部门">-->
      <!--                <el-option v-for="(item, index) in deptOption" :key="index" :label="item.name" :value="item.name">-->
      <!--                </el-option>-->
      <!--            </el-select>-->
      <div style="margin-left:10px">
        <el-input style="float:left;width:200px;margin-left:10px" v-model="searchByName" class='searchByName'
                  placeholder="请输入人员名称关键字" />
        <!-- <i class="el-icon-search"></i> -->
        <el-button type="primary" @click="searchByNameFun" style="margin-left: 20px;">查询</el-button>
        <el-button type="primary" @click="addUser" style="margin-left: 20px;">添加人员</el-button>
      </div>
      <!-- 表格 -->
      <el-table :data="userList" stripe style="width: 95%">
        <!-- <el-table-column type="index" label="#" width="80px"> -->
        <!-- </el-table-column> -->
        <el-table-column label="编号" width="120" prop="id">
        </el-table-column>
        <el-table-column label="账号" width="120" prop="username">
        </el-table-column>
        <el-table-column label="姓名" width="170" prop="name">
        </el-table-column>
        <el-table-column label="性别" width="170" prop="sex">
        </el-table-column>

        <el-table-column label="身份" width="170" prop="access">
          <template slot-scope="scope">
            {{ scope.row.access === 0 ? '普通会员' : '' }}
            {{ scope.row.access === 1 ? '店家' : '' }}
            {{ scope.row.access === 2 ? '超级管理员' : '' }}
          </template>
        </el-table-column>
        <el-table-column label="注册时间" width="170" prop="createTime">
        </el-table-column>
        <el-table-column label="操作" width="350">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="update(scope.row)">编辑</el-button>
            <el-button type="success" size="mini" @click="detail('修改管理信息', scope.row.id)">详情</el-button>
            <template>
              <el-popconfirm @confirm="deleteBtn(scope.row)" title="确定要删除？">
                <el-button style="margin-left:10px" slot="reference" class="deleteBtn" type="danger"
                           size="mini">删除</el-button>
              </el-popconfirm>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row>
        <el-col :span="12" :offset="12">
          <el-pagination layout="total,prev, pager, next,jumper,sizes " background small prev-text="上一页"
                         next-text="下一页" :total="total" :page-size="pageSize" :current-page="pageNow"
                         :page-sizes="[5, 10, 50]" style="margin:15px 0px" @current-change="findPage"
                         @size-change="findSize">
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog title="个人信息展示" :visible.sync="userDetailShow">
      <!-- <div>物资类型展示</div> -->
      <!-- <UserDetailVue></UserDetailVue>    -->
      <div>
        <el-descriptions class="margin-top" title="带边框列表" :column="3" :size="size" border>
          <template slot="extra">
            <el-button type="primary" size="small" @click="resetPassword(userDetail)">重置密码</el-button>
          </template>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              账号
            </template>
            {{ userDetail.username }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{ userDetail.phone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              姓名
            </template>
            <el-tag size="small">{{ userDetail.name }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              注册时间
            </template>
            {{ userDetail.createTime }}
          </el-descriptions-item>
          <el-descriptions-item v-if="userDetail.access === 0">
            <template slot="label">
              <i class="el-icon-office-building"></i>
              权限
            </template>
            普通会员
          </el-descriptions-item>

          <el-descriptions-item v-if="userDetail.access === 1">
            <template slot="label">
              <i class="el-icon-office-building"></i>
              景区商家
            </template>

          </el-descriptions-item>

          <el-descriptions-item v-if="userDetail.access === 2">
            <template slot="label">
              <i class="el-icon-office-building"></i>
              权限
            </template>
            超级管理员
          </el-descriptions-item>

          <el-descriptions-item v-if="userDetail.state === 1">
            <template slot="label">
              <i class="el-icon-office-building"></i>
              状态
            </template>
            正常
          </el-descriptions-item>

          <el-descriptions-item v-if="userDetail.state === 0">
            <template slot="label">
              <i class="el-icon-office-building"></i>
              状态
            </template>
            被禁用
          </el-descriptions-item>
        </el-descriptions>
      </div>

    </el-dialog>

    <!-- 添加或者修改的表单 -->
    <el-dialog title="添加或修改人员信息" :visible.sync="addOrUpdateFormShow">
      <!-- <div>物资类型展示</div> -->
      <div>
        <!-- :rules="rules"校验 -->
        <el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" hide-required-asterisk
                 label-suffix=":" class="demo-ruleForm">

          <el-form-item label="账号" prop="username">
            <el-input v-model="addForm.username" style="width: 30%"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input v-model="addForm.password" style="width: 30%"></el-input>
          </el-form-item>


          <el-form-item label="姓名" prop="name">
            <el-input v-model="addForm.name" style="width: 30%"></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="name">
            <el-radio v-model="addForm.sex" label="男">男</el-radio>
            <el-radio v-model="addForm.sex" label="女">女</el-radio>
          </el-form-item>

          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="addForm.phone" style="width: 20%"></el-input>
          </el-form-item>

          <el-form-item label="权限" prop="access">
            <el-select v-model="addForm.access" placeholder="请选择角色权限">
              <el-option v-for="(item, index) in accessOption" :key="index" :label="item.name"
                         :value="item.id">
              </el-option>

            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('addForm')">提交</el-button>
            <el-button @click="resetForm('addForm')">重置</el-button>

          </el-form-item>
        </el-form>
      </div>

    </el-dialog>


  </div>
</template>

<script>
// import UserDetailVue from '@/components/UserDetail.vue'
export default {
  name: 'user',
  components: {
    // UserDetailVue
  },
  data() {
    return {
      //权限选择
      accessOption: [
        {
          id: 0,
          name: '普通群众'
        },
        {
          id: 1,
          name: '花店商家'
        },
        {
          id: 2,
          name: '超级管理员'
        }
      ],

      //添加表单
      addForm: {
        id: 0,
        sex: '男'
      },
      size: '',
      addOrUpdateFormShow: false,
      // 详情失败
      userDetailShow: false,
      // 部门下拉选择值的记录
      value: '',
      searchByName: "",
      searchByDept: "",
      pageNow: 1,
      pageSize: 5,
      total: 0,
      userDetail: {},
      deptOption: [
        {
          id: 1,
          name: '测试',
        },
        {
          id: 2,
          name: '开发',
        }
      ],
      rules: {
        name: [
          { required: true, message: '请输入用户姓名', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请设置用户登录账号', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        access: [
          { required: true, message: '请选择权限', trigger: 'blur' },
        ],
      },
      userList: [
        {
          id: 1,
          username: 'sakura',
          name: '吕晨',
          dept: '开发部门',
          phone: '12342',
          state: 1,
          registeTime: '2023-4-21',

        }
      ],
    };
  },

  mounted() {
    // this.findPage(1)
    this.searchByNameFun()
    // this.getDeptList()
  },

  methods: {
    //提交添加或者修改的表单
    submitForm(formName) {
      // console.log(this.addForm)
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.$http.post("/user/saveOrUpdate", this.addForm).then(res => {
            // console.log(res.data)
            if (res.data.status) {
              this.$message.success(res.data.data);
              this.searchByNameFun()
            } else {
              this.$message.error(res.msg);
            }
          })
          this.searchByNameFun()
          this.addOrUpdateFormShow = false
          this.addForm = {
            id: 0,
          }
        } else {

          return false;
        }
      });
    },

    //重置添加表单
    resetForm(formName) {
      // console.log(formName)
      this.$refs[formName].resetFields();
    },

    //重置密码
    resetPassword(userDetail) {
      const user = JSON.parse(window.sessionStorage.getItem("user"))
      if (user.username === 'admin' | user.access < userDetail.access) {
        this.$http.put("/user/resetPwd/" + userDetail.id).then(res => {
          // console.log(res.data)
          if (res.data.status) {
            this.$message.success(res.data.data);
          } else {
            this.$message.error(res.msg);
          }
        })
        return
      }
      this.$message.error("您无权重置管理员密码")
      // return
    },

    addUser() {
      this.addOrUpdateFormShow = true
      this.addForm = {};
      // console.log(this.addForm)
    },

    update(row) {
      // console.log(row)
      this.addForm = row
      // console.log(this.deptOption)
      // console.log(this.accessOption)
      const user = JSON.parse(window.sessionStorage.getItem("user"))
      if (user.username === 'admin' | user.access < row.access) {
        this.addOrUpdateFormShow = true
        this.searchByNameFun()
        return
      }
      this.$message.error("您无权更改管理员的信息")

    },

    deleteBtn(row) {
      // console.log("删除"+id)
      const user = JSON.parse(window.sessionStorage.getItem("user"))
      if (user.username === 'admin' | user.access < row.access) {
        this.$http.delete("/user/delete/" + row.id).then(res => {
          // console.log(res.data)
          if (res.data.status) {
            this.$message.success(res.data.data);
            this.searchByNameFun()
          } else {
            this.$message.error(res.msg);
          }
          // console.log(this.userDetail)
        });
        return
      }
      this.$message.error("您无权删除管理员")
    },

    //用户详情
    detail(value, id) {
      // console.log(value,id)
      this.$http.get("/user/detail/" + id).then(res => {
        console.log(res.data)
        this.userDetail = res.data.data;
        // console.log(this.userDetail)
      });
      this.userDetailShow = true
    },


    // 根据部门的关键字查询
    searchByNameFun() {
      // console.log(this.searchByName)
      // console.log(this.searchByDept)
      // this.pageNow = 1
      // 页面变动之后需要查询相同种类的变动页码的数据
      this.$http.get("/user/list/" + this.pageNow + "/" + this.pageSize + "?searchKey=" + this.searchByName)
          .then(res => {
            this.userList = res.data.data.records;
            this.total = res.data.data.total
            // console.log(res.data)
          });

    },
    //管理员状态改变
    async stateChange(state, row) {
      // console.log(row)
      //发起请求根据 id 修改用户的状态
      // console.log(user.access)
      // console.log(row.access)
      const user = JSON.parse(window.sessionStorage.getItem("user"))
      if (row.username === 'admin') {
        this.$message.error("超级管理员无法被禁用")
        return
      }
      if (user.access >= row.access) {
        this.$message.error("您无权更改管理员的状态")
        return
      }

      const { data: res } = await this.$http.put(`/user/changeState/${row.id}/${state}`)
      if (res.status) {
        this.$message.success(res.data)
        this.searchByNameFun()
      }
      else {
        this.$message.error(res.msg)
      }
      this.findPage(this.pageNow)
    },
    //改变页码数据量大小
    findSize(size) {
      this.pageSize = size
      this.searchByNameFun()
    },
    findPage(page) {

      this.pageNow = page
      this.searchByNameFun()

    },
  },
};
</script>

<style lang='scss' scoped></style>
